<template>
  <q-item
    clickable
    v-ripple
    :to="props.link"
    :exact="props.exact"
    :active-class="props.mini ? 'bg-primary text-white' : 'text-primary'"
    :class="{ 'q-mini-drawer-hide': props.mini }"
  >
    <q-item-section avatar>
      <q-icon :name="props.icon" />
    </q-item-section>

    <q-item-section v-show="!props.mini">
      <q-item-label>{{ props.title }}</q-item-label>
      <q-item-label caption v-if="props.caption">{{ props.caption }}</q-item-label>
    </q-item-section>

    <q-tooltip v-if="props.mini">
      {{ props.title }}
    </q-tooltip>
  </q-item>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  caption: {
    type: String,
    default: ''
  },
  link: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  mini: {
    type: Boolean,
    default: false
  },
  exact: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss">
.q-mini-drawer-hide {
  padding: 8px;
  justify-content: center;
  
  .q-item__section--avatar {
    min-width: unset;
    padding: 0;
  }
  
  .q-item__section--main {
    display: none;
  }
}
</style>
